<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrollable Background Image Example</title>
    <link rel="stylesheet" href="cdn/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" type="text/css" href="./css/swiper.min.css">
</head>
<body>
<div>
    <div class="background">
        <img src="img/14.png" class="bg-1">
        <img src="img/15.png" class="bg-2">
        <img src="img/背景素材2.png" class="bg-3">
        <header>
            <nav class="navbar navbar-expand-lg navbar-light my-nav">
                <div class="navbar-brand my-nav-left " href="#">
                    <img class="my-nav-img" src="./img/底部logo.png" alt="豪斌辉出品">
                    <div class="my-nav-txt">
                        <div class="my-nav-t1">
                            豪斌辉出品中国水墨画文化
                        </div>
                        <div class="my-nav-t2">
                            Chinese ink culture
                        </div>
                    </div>
                </div>

                <div class="my-nav-tab" id="navbarNav">
                    <ul class="navbar-nav ml-auto  my-nav-ul">
                        <li class="nav-item">
                            <a class="nav-link" href="index.html">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="history.html">历史</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="faction.html">派别<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="painting.html">名画</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <div class="top-content">
            <img class="line">
            <img class="fa" src="./img/派别与画家.png" alt="矩形">
            <img class="Schools" src="./img/Schools and painters.png" alt="矩形">
            <img class="bg" src="./img/矩形 1.png" alt="矩形">
        </div>

        <div class="main-content">
            <div class="my-swiper-container">
                <img src="./img/图层 2 拷贝.png" alt="" id="prevBtn">
                <img src="./img/图层 2.png" alt="" id="nextBtn">
                <div class="main-schools-content faction">
                    <div class="main-schools-t1">主要派别</div>
                    <div class="main-schools-t2">FACTION</div>
                </div>
                <div class="swiper-container swiper-container-big">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./img/banner1.png">
                            <div class="swiper-bottom">
                                <div class="school-name">北方山水画派系</div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/banner3.png">
                            <div class="swiper-bottom">
                                <div class="school-name">吴门画派</div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/banner2.png">
                            <div class="swiper-bottom">
                                <div class="school-name">更多</div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/banner4.png">
                            <div class="swiper-bottom">
                                <div class="school-name">南方山水画派</div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/banner5.png">
                            <div class="swiper-bottom">
                                <div class="school-name">米派</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-schools-content details">
                    <div class="main-schools-t1">详情</div>
                    <div class="main-schools-t3">DETAILS</div>
                </div>
                <img src="./img/图层 2 拷贝 2.png" alt="" id="prevBtn-mini">
                <img src="./img/图层 2 拷贝 3.png" alt="" id="nextBtn-mini">

                <div class="swiper-container swiper-container-mini">
                    <div class="swiper-wrapper">





                        <div class="swiper-slide swiper-slide-mini">
                            <img src="./img/mini-banner3.png">
                            <div class="swiper-des">
                                <div class="des-txt">更多</div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slide-mini">
                            <img src="./img/mini-banner1.png">
                            <div class="swiper-des">
                                <div class="des-txt">南方山水画派</div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slide-mini">
                            <img src="./img/mini-banner2.png">
                            <div class="swiper-des">
                                <div class="des-txt">北方山水画派</div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slide-mini">
                            <img src="./img/mini-banner4.png">
                            <div class="swiper-des">
                                <div class="des-txt">吴门画派</div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-slide-mini">
                            <img src="./img/mini-banner5.png">
                            <div class="swiper-des">
                                <div class="des-txt">米派</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-schools-content north">
                    <div class="north-title" id="titleDisplay">北方山水画派</div>
                    <div class="north-content" id="contentDisplay">
                        中国画流派之一，中国山水画至北宋初，始分北方派系和江南派系。郭若虚《图画见闻志》说：“唯营丘李成，长安关仝、华原范宽，智妙入神，才高出类，三家鼎峙，百代标程。”又说：“夫气象萧疏，烟林清旷，毫锋颖脱，墨法精微者，营丘之制也；石体坚凝，杂木丰茂，台阁古雅，人物幽闲者，关氏之风也”，李、关、范的画风，风靡齐、鲁，影响关、陕，实为北方山水画派之宗师。
                    </div>
                </div>
            </div>
            <div class="pinter-content">
                <div class="main-schools-content details">
                    <div class="main-schools-t1">了解画家</div>
                    <div class="main-schools-pinter">PINTER</div>
                </div>
                <div class="container-pinter">
                    <div class="item-pinter">
                        <img src="img/19.png">
                        <div class="pinter-des">
                            <div class="pinter-title">
                                <div class="p-t-1 text-line">
                                    任颐
                                </div>
                                <div class="p-t-2 text-line">
                                    RENYI
                                </div>
                            </div>
                            <div class="pinter-content-txt text-line">
                                重要事件：任颐是清末国画画家，他是“海上画派”中的佼佼者，也是“海派四杰”之一。他的绘画起初受民间艺术的影响，技法全面，涵盖山水、花鸟、人物等各领域。
                            </div>
                        </div>
                    </div>
                    <div class="item-pinter"><img src="img/19-1.png">
                        <div class="pinter-des">
                            <div class="pinter-title">
                                <div class="p-t-1 text-line">
                                    齐白石
                                </div>
                                <div class="p-t-2 text-line">
                                    QI BAISHI
                                </div>
                            </div>
                            <div class="pinter-content-txt text-line">
                                重要事件：齐白石是近现代中国最著名的画家之一。他擅长绘画花鸟、虫鱼山水和人物，他的笔墨雄浑滋润，色彩浓郁鲜艳，创作风格独特。他以自由奔放的笔触和富有表现力的形象塑造而闻名，被誉为齐白石笔墨。
                            </div>
                        </div>
                    </div>
                    <div class="item-pinter"><img src="img/19-2.png">
                        <div class="pinter-des">
                            <div class="pinter-title">
                                <div class="p-t-1 text-line">
                                    吴昌硕
                                </div>
                                <div class="p-t-2 text-line">
                                    WU CHANGSHUO
                                </div>
                            </div>
                            <div class="pinter-content-txt text-line">
                                重要事件：吴昌硕是中国国画代表人物，他是晚清民国时期的艺术大师。他集诗、书、画、印于一身，将金石书画融为一体被誉为“石鼓篆书第一人和“文人画最后的高峰。
                            </div>
                        </div>
                    </div>
                    <div class="item-pinter"><img src="img/19-3.png">
                        <div class="pinter-des">
                            <div class="pinter-title">
                                <div class="p-t-1 text-line">
                                    黄宾虹
                                </div>
                                <div class="p-t-2 text-line">
                                    HUNANG BINGHONG
                                </div>
                            </div>
                            <div class="pinter-content-txt text-line">
                                黄宾虹的艺术成就对中国绘画界具有重要的影响。他以其独特的画风和艺术观念，开创了山水画的新境界。他的作品融汇了传统和现代的绘画元素，探索了艺术表达的新路径。
                            </div>
                        </div>
                    </div>
                    <div class="item-pinter"><img src="img/19-4.png">
                        <div class="pinter-des">
                            <div class="pinter-title">
                                <div class="p-t-1 text-line">
                                    徐悲鸿
                                </div>
                                <div class="p-t-2 text-line">
                                    XU BEIHONG
                                </div>
                            </div>
                            <div class="pinter-content-txt text-line">
                                重要事件：徐悲鸿的艺术观念和作品对中国绘画产生了深远的影响。他倡导的现实主义风格和对传统艺术的改良，拓宽了中国画的表现形式，并融入了西方绘画的技巧和思想。
                            </div>
                        </div>
                    </div>
                    <div class="item-pinter"><img src="img/19-5.png">
                        <div class="pinter-des">
                            <div class="pinter-title">
                                <div class="p-t-1 text-line">
                                    张大千
                                </div>
                                <div class="p-t-2 text-line">
                                    ZHANG DAQIAN
                                </div>
                            </div>
                            <div class="pinter-content-txt text-line">
                                重要事件：张大千对中国画坛的影响深远。他以独特的创作风格和广泛的艺术涵盖面，开创了中国画的新境界。他的作品在国际艺术界赢得了高度赞誉，为中国画树立了崭新的形象。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="content-bottom">
        <div class="content-bottom-div">
            <img class="logo" src="./img/底部logo.png">
            <div class="content-bottom-div1">
                <img class="sm" src="./img/中国水墨画.png">
                <img class="sm-en" src="./img/Chinese ink painting.png">
            </div>
        </div>
        <p>版权所有.豪斌辉引邮箱：6868994@QQ.C0M|电话：131396554|邮编：666|反馈与建议：WWW.ZSB.C0M</p>
    </div>
</div>

</body>
<script type="text/javascript" src="./js/swiper.min.js"></script>
<script type="text/javascript">

    // cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数，可选值：

    // rotate：slide做3d旋转时Y轴的旋转角度。默认50。
    // stretch：每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
    // depth：slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
    // modifier：depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
    // slideShadows：开启slide阴影。默认 true。
    var mySwiper = new Swiper('.swiper-container-big', {
        loop: true, // 循环模式选项
        slide: 'fade',
        // slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
        effect: 'coverflow',
        slidesPerView: 3,// 设置slider容器能够同时显示的slides数量(carousel模式)
        centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。
        coverflowEffect: {
            rotate: 0,  // rotate：slide做3d旋转时Y轴的旋转角度。默认50。
            stretch: 5, // 指的时后面一张图片被前一张图片遮挡的部分
            depth: 160, // 图片缩小的部分
            modifier: 2,
            slideShadows: false
        }
    })
    document.getElementById('prevBtn').addEventListener('click', function () {
        mySwiper.slidePrev();
    });

    document.getElementById('nextBtn').addEventListener('click', function () {
        mySwiper.slideNext();
    });



    var contentDisplay = document.getElementById('contentDisplay');
    var titleDisplay = document.getElementById('titleDisplay');

    // Content for different slides
    var contentArray = [
        "中国画流派之一，中国山水画至北宋初，始分北方派系和江南派系。郭若虚《图画见闻志》说：“唯营丘李成，长安关仝、华原范宽，智妙入神，才高出类，三家鼎峙，百代标程。”又说：“夫气象萧疏，烟林清旷，毫锋颖脱，墨法精微者，营丘之制也；石体坚凝，杂木丰茂，台阁古雅，人物幽闲者，关氏之风也”，李、关、范的画风，风靡齐、鲁，影响关、陕，实为北方山水画派之宗师。",
        "吴门画派-简称“吴门派”。中国画流派之一。明代沈周与其学生文徵明，画山水崇尚北宋和元代，与取法南宋的浙派风格不同，盛行于明代中期，从学者甚众，著名的有文伯仁、文嘉、陈道复、王榖祥、陆治、钱榖等，他们均为苏州府人，苏州别名“吴门”，因称。在当时画坛占有重要地位。",
        "米派-宋代山水画流派之一。米芾（古代著名书法家）所创，其子米友仁又加以继承发展，其特点在于用水墨点染的方法，描绘烟云掩映的山川景色，自称“墨戏”，世称米氏云山”，或称“米家山水”。",
        "更多-黄荃画派,徐熙画派,湖州竹派,常州画派，松江画派.....各个画派各有特色，百花齐放，各个画派又有独具特色的代表人物。",
        "南方山水派-南方山水画派，源自北宋，以董源、巨然为代表，描绘江南自然风光，风格自然纯真，追求和谐美。董源展现秋岚江南山水，巨然承其法而达艺术高峰，惠崇、赵令穰亦有贡献。米芾父子则以京口景色为题材，注入新风貌。南宋末至元代，法常、若芬等画家使此派达鼎盛，共同展现江南山水之美及画家们对自然的感悟与技艺。"
    ];
    var titleArray = [
        "北方山水画派",
        "吴门画派",
        "米派",
        "更多",
        "南方山水派"
    ];

    var mySwiper_mini = new Swiper('.swiper-container-mini', {
        loop: true, // 循环模式选项
        // slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
        effect: 'coverflow',
        slidesPerView: 5,// 设置slider容器能够同时显示的slides数量(carousel模式)
        centeredSlides: false, // 设定为true时，active slide会居中，而不是默认状态下的居左。
        coverflowEffect: {
            rotate: 0,
            stretch: -10, // 指的时后面一张图片被前一张图片遮挡的部分
            depth: 0, // 图片缩小的部分
            // depth: 160, // 图片缩小的部分
            modifier: 2,
            slideShadows: false,
        },
        on: {
            slideChange: function () {
                var realIndex = this.realIndex; // Swiper uses zero-based indexing

                contentDisplay.textContent = contentArray[realIndex];
                titleDisplay.textContent = titleArray[realIndex];
            }
        }
    })
    document.getElementById('prevBtn-mini').addEventListener('click', function () {
        mySwiper_mini.slidePrev();
    });

    document.getElementById('nextBtn-mini').addEventListener('click', function () {
        mySwiper_mini.slideNext();
    });

</script>
</html>
